<template>
	<div class="ordermjly">
		<div class="shopcard-listBox">
			<ul class="shopcard-list-item-box">
				<li class="shopcard-list-item">
					<div>
						<router-link :to="{path:'/shopXQ/'+shopxinxi.goods_id}">
							<img :src="'http://www.ntyouxuan.com/'+shopxinxi.goods_image"/>
							<div class="shopcard-list-item-xinxi">
								<h3 v-text="shopxinxi.goods_name"></h3>
								<p><span v-text="shopxinxi.specification">白色 ; 10斤装</span></p>
								<div class="shopcard-item-num">
									<span>￥</span>
									<span v-text="shopxinxi.price_detail[0]+'.'"></span>
									<span v-text="shopxinxi.price_detail[1]"></span>
									<p class="shopDd-itemnum" v-text="'x'+shopxinxi.quantity"></p>
								</div>
							</div>
						</router-link>
					</div>
				</li>	
			</ul>
		</div>
		<div class="ordermjly-content"><textarea name="" rows="3" cols="" v-model="lycon" placeholder="请填写你要留言的信息"></textarea></div>
		<div class="refund-imglist">
			<div><span v-if="sendimg"><img src="../../img-order/photo@3x.png"/><input type="file" name="" id="" value="" accept="image/*" @change="imagetian()"/></span><span v-for="(item,index) in imglist"><img :src="item"/><span @click="deleimg(index)"><img src="../../img-order/icon_close@3x.png"/></span></span></div>
		</div>
		<p class="ordermjly-tj" @click="tjlybtn()">提交留言</p>
	</div>
</template>

<script>
	export default{
		name:'ordermjly',
		data (){
			return{
				sendimg:true,
				imglist:[],
				user:0,
				refundid:0,
				shopxinxi:'',
				lycon:''
			}
		},
		created:function(){
			console.log(furl);
			this.refundid=this.$route.query.refundid;
			this.user=localStorage.getItem("nt_user");
		},
		mounted:function(){
			var self=this;
			$.ajax({
				type:"post",
				url:furl+"index.php?app=ajax_refund&act=message",
				data:{'token':self.user,'refund_id':self.refundid},
				dataType:'json',
				success:function(res){
					if(res.done){
						self.shopxinxi=res.retval;
					}
				}
			});
		},
		methods:{
			imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
//                  console.log("成功读取....");
                    self.imglist.push(e.target.result);
                    $('input[type=file]')[0].value="";
                    if(self.imglist.length>=8){
                    	self.sendimg=false;
                    }
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);				
			},
			deleimg:function(ind){
				this.imglist.splice(ind,1);
				console.log(this.imglist.length)
				if(this.imglist.length<8){
					this.sendimg=true;
				}
			},
			tjlybtn:function(){
				var self=this;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=message_post",
					data:{'token':self.user,'refund_id':self.refundid,'content':self.lycon,'refund_cert':self.imglist},
					dataType:'json',
					success:function(res){
						if(res.done){
							history.go(-1);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.ordermjly{margin-top: -0.98rem;}
	.ordermjly .shopcard-listBox{margin-bottom: 0;}
	.ordermjly-content{background-color:#fff;padding:0.32rem;}
	.ordermjly-content>textarea{width:100%;font-size:0.32rem;line-height: 0.48rem;color:#2B2B2B;}
	.ordermjly-tj{margin:0.4rem 0.32rem;background-color:#4C9D31;height:1rem;color:#fff;font-size:0.36rem;text-align: center;line-height: 1rem;border-radius:1rem;letter-spacing: 0.08rem;}
</style>